<template>
  <div class="home">
    <Header v-if="!shows" />

 <div class="content" v-if="!shows">  
     <div class="actives fadeInDow">  
        <van-swipe
        class="my-swipe1"
        :autoplay="3000"
        :show-indicators="false"      >
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="dqyy =='en-US'?item.thumb_en: item.thumb" alt="" class="imgss" />
        </van-swipe-item>
      </van-swipe>  
      <div class="notific">  
        <div class="right">
        <van-notice-bar
  background="transparent"
  color="#ffffff"
  text="Welcome to  Future Protocol  Welcome to  Future Protocol   Welcome to  Future Protocol"
/>   </div>
      </div>
      
      </div>

<div class="price">
  <div class="box">
    <div class="txt">{{$t('m.FP价格')}}</div>
    <div class="num">${{price||0}}</div>
  </div>
  <div class="mbox flexs">
  <div class="nitem tl">
    <div class="txt">{{$t('m.底池厚度')}}</div>
    <div class="num">{{dexc(info.r7)}} FPC</div>
    <div class="num">{{dexc(infos.r5)}} USDT</div>
  </div>
  <div class="nitem ">
    <div class="txt"> {{$t('m.当前市值')}}</div>
    <div class="num">${{jsPrice(dexc(info.r11))}}</div>
  </div>
</div>
<div class="mbox">
  <div class="item">
    <div class="txt">{{$t('m.销毁市值')}}</div>
    <div class="right"> 
      <div class="num">{{dexc(info.r9)}} FPC</div>
    <div class="snum">${{jsPrice(dexc(info.r9))}}</div>
  </div>
   
  </div>
</div>
<div class="mbox">
  <div class="item ">
    <div class="txt">{{$t('m.国库资产')}}</div>
    <div class="right"> 
      <div class="num">{{dexc(info.r1)}} FPC/{{dexc(infos.r1)}} USDT</div>
    <div class="snum">${{dexc(infos.r3)}}</div>
  </div>
  </div>
</div>
<div class="mbox">
  <div class="item ">
    <div class="txt">{{$t('m.LP流动性')}}</div>
    <div class="right"> 

      <div class="num">{{dexc(lpinfo.r1)}} LP-CAKE</div>
    <!-- <div class="snum">${{dexc(lpinfo.r3)}}</div> -->
  </div>
  </div>
</div>

<div class="mbox">
  <div class="item">
    <div class="txt">{{$t('m.奖金池资产')}}</div>
    <div class="right">
      <div class="num">{{dexc(info.r3)}} FPC</div>
    <div class="snum">${{dexc(info.r6)}}</div>
    </div>
  </div> 
</div>
<div class="mbox">
  <div class="item">
    <div class="txt">{{$t('m.全网算力值')}}</div>
    <div class="right">
      <div class="num">{{dexc(totalPower.r5)}} </div>
    </div>
  </div> 
</div>
<div class="mbox nobr">
  <div class="items actc">
    <div class="txt">{{$t('m.质押算力值')}}</div>
    <div class="num">{{dexc(totalPower.r1)}}</div>
  </div>
  <div class="items  actc m16">
    <div class="txt">{{$t('m.国库债券算力值')}}</div>
    <div class="num">{{dexc(totalPower.r2)}}</div>
  </div>
 
</div>
<div class="mbox nobr">
   <div class="items actc ">
    <div class="txt">{{$t('m.流动性债券算力值')}}</div>
    <div class="num">{{dexc(totalPower.r3)}}</div>
  </div>
  <div class="items  actc m16">
    <div class="txt">{{$t('m.权益债券算力值')}}</div>
    <div class="num">{{dexc(totalPower.r4)}}</div>
  </div>
</div>
</div>
<div class="card0">
      <div class="title">{{$t('m.未来协议')}}</div>
      <div class="box">
        <div class="txts">{{$t('m.未來協議是基於')}}</div>
          
        <div class="txts"> {{$t('m.協議圍繞著算力機制')}} </div>
        <div class="txts">{{$t('m.所有激勵來自交易行為')}}   </div>
      </div>
</div>
<div class="card">
      <div class="titles">{{$t('m.生態佈局')}}</div>
      <div class="txts  cent">{{$t('m.四大內置支柱為系統提供穩定性')}}</div>
      <div class="line"></div> 
      <div class="box">
        <img src="../assets/img/tit1.png" alt="" srcset="" class="ico">
      <div class="title">{{$t('m.國庫系統：真實資產支撐')}}</div>
      <div class="txts cent">{{$t('m.所有國債資金沉澱入國庫，構成真實資產的底層儲備')}}</div>   
      <div class="txts cent">{{$t('m.國庫不參與激勵分配，但承擔FPC價格支撐職能')}}</div>   
      <div class="txts cent">{{$t('m.在極端市場中可啟動回購，保障 FPC 價值有效性')}}</div>  
      <div class="line"></div> 
      <img src="../assets/img/tit2.png" alt="" srcset="" class="ico">   
      <div class="title">{{$t('m.獎金池系統：市場激勵來源')}}</div>
      <div class="txts cent">{{$t('m.獎金池來自交易燃燒注資，是系統內唯一激勵來源')}}</div>   
      <div class="txts cent">{{$t('m.每日FPC分配按演算法進行分配')}}</div>   
      <div class="txts cent">{{$t('m.賣出越多，獎金池越大，系統參與者獲取FPC越多')}}</div>   
      <div class="line"></div> 
      <img src="../assets/img/tit3.png" alt="" srcset="" class="ico">
      <div class="title">{{$t("m.渦輪機制：分配再結構化")}}</div>
      <div class="txts cent">{{$t('m.提取資金 80% 進入渦輪池，釋放前必須買入等量 FPC 啟動')}}</div>
      <div class="txts cent">{{$t('m.買入後冷卻 24 小時，提取額度即時釋放')}}</div>
      <div class="txts cent">{{$t('m.每次啟動都伴隨交易、銷毀與獎金注入，實現分配閉環')}}</div>
      <div class="line"></div> 
      <img src="../assets/img/tit4.png" alt="" srcset="" class="ico">
      <div class="title">{{$t('m.交易機制：價格回饋裝置')}}</div>
      <div class="txts cent">{{$t('m.賣出滑點 5%，其中 2% 銷毀，3% 社區運營')}}</div>
      <div class="txts cent">{{$t('m.每筆交易都會同步觸發底池燃燒，持續壓縮流通量')}}</div>
      <div class="txts cent">{{$t('m.所有分配後代幣均需通過 AMM 自動做市機制完成兌現')}}</div>
    </div>
     </div> 

 


    

   

    


     

  
    
    
      
     

     

     

      
    <div class="buttoms">
      <div class="imgline">
        <img src="../assets/img/Telegram.svg" alt=""  class="img"  @click="toOpen('http://t.me/FPCglobal')"/>
        <img src="../assets/img/Medium.svg" alt=""  class="img" @click="toOpen('http://medium.com/@FPCLabs')" />
        <img src="../assets/img/Twitter.svg" alt=""  class="img" @click="toOpen('http://x.com/BuildWithFP')" />
      </div>
      Copyright © 2025 Future Protocol. All rights reserved.
    </div>
    <Bottom/>
    </div>

 <van-popup v-model="showdd" round :close-on-click-overlay="false">
      <div class="popup">       
        <div class="sqtxt">提示</div>
        <div class="flsz">       
         <div class="btn">
          合约升级中
        </div>
        </div>
      </div>
    </van-popup>
   

<!-- 授权 -->
 <van-popup v-model="impower" round :close-on-click-overlay="false">
      <div class="popup">     
          <div class="top"> 
        <div class="title">{{ $t("m.sqbtn") }}</div></div>
        <div class="txt m66">{{$t('m.sqinfo')}}</div>
        <div class="flsz">       
         <div class="btn" @click="approve">
          {{ sqloading ? $t("m.sqload") : $t("m.sqbtn") }}
        </div>
        </div>
      </div>
    </van-popup>
    


    <van-popup v-model="shows" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="top"> 
        <div class="title">{{ $t("m.dltt") }}</div></div>
        <div class="txt m66">{{ $t("m.dlinfo") }}</div>
        <div class="btns" @click="ethConnect">{{ $t("m.dlbtn") }}</div>     
      </div>
    </van-popup>

 <van-popup v-model="bdshows" round :close-on-click-overlay="!bdshows">
      <div class="popup">
             <div class="top"> 
        <div class="title">{{ $t("m.bdtt") }}</div></div>
        <div class="txt">{{ $t("m.bdinfo") }}</div>
        <div>
          <input type="text" class="input" v-model="yqmcode" />
        </div>
        <van-button
          :loading="bdloading"
          type="primary"
          @click="tobding"
          class="btn"
          :loading-text="$t('m.bdload')"
        >
          {{ $t("m.bdbtn") }}</van-button
        >
      </div>
    </van-popup>


  </div>
</template>

<script>
import { connectTron ,Sign,getUByAmounts,getContBalanceFPC,getContBalanceUSDT,getContTotalPower,
  getMyDeedPool,getMyLp,getCanBind,getContBalanceLP,
  getUser,toBind,toBookOrder,getProveds,toApproves,toWithdrawalStatic,toWithdrawalDynamic} from "@/api/Public";
import Header from '../components/header.vue';
import Bottom from '../components/bottom.vue';
import Web3 from 'web3'
export default {
  name: "Home",
  components: {Header,Bottom},
  data() {
    return {
      sxshow:false,
      actions:[{text:100},{text:200},{text:300, disabled: true},{text:400, disabled: true},{text:500, disabled: true}],
      bkdata:'',
      xzNum:'',
      myArb:0,
      pairs:'',
      value:10,
      datas:'',
      syq: false,
      showdd:false,
      clmenuShows: false,
      bdshows: false,
      show: true,
      shows: false,
      impower: false,
      bsurl:'',
      nodelist: [],
      nodeshow: false,
      ldxnodeshow:false,
      scnodeshow:false,
      more: true,
      userWallet: "",
      yqmcode: "",
      totaljoin: 0,
      dayjoin: 0,
      myID: "",
      Winner: "",
      Pool: "",
      Time: "",
      buyaddress: "",
      myas: false,
      bang: true,
      acdite: false,
      sqloading: false,
      bdloading: false,
      tbloading: false,
      sdloading:false,
      wshows: false,
      loadings: false,
      Winners: [],
      Cion: "",
      wf: {
        bz: "0",
        sxf: 300,
        sl: "",
        num: 100,
      },
      userInfo:"",
      endTime:0,
      bate:'',
      bates:'',
      showldx:false,
      ldxloading:false,
      showsc:false,
      ldxnum:100,
      mobility:'',
        page:1,
       loading: false,
      finished: false,
      refreshing: false,
      redaio:3,
      type:0,
      current:0,
      lpshow:false,
      lqshow:false,
      lqshows:false,
      lqloading:false,
      lpdata:'',
      base:'',
      feebnb:1,
      vshow:false,
        banner: [ 
        {  "thumb": require('../assets/img/banner.jpg'),"thumb_en": require('../assets/img/banner.jpg')}
      
      ],   
      // video:require('../assets/img/open.mp4'),   
      video:'',  
        codeWallet:"https://?code=" + this.$store.getters.userWallet,
        lploading:false,
        list:[],
        i:0,
        page:1,
        price:0,
        time:'',
        pricetime:'',
        exshow:false,
        exshows:false,
        exloading:false,
        exmcode:'',
        values:0,
        exnum:'',
        twAmount:'',        
        sqNum:0,
        sqNums:0,
        sqUsdtNum:0,
        sqArcNum:0,
        lqNum:0,
        lqType:0,
        pool:0,
        hoder:0,
        mylp:"",
        energyPool:0,
        energy:0,
        available:0,
        info:"",
        infos:"",
        lpinfo:"",
        totalPower:'',
        isOpen:true,
        isSign:true

    };
  },
  filters: {
      Endtime(e){
    var    end_str = (e).replace(/-/g,"/");//一般得到的时间的格式都是：yyyy-MM-dd hh24:mi:ss，所以我就用了这个做例子，是/的格式，就不用replace了。  
    var end_date =new Date(end_str)-new Date;//将字符串转化为时间  
    return end_date
    },
   
    formatDate(e) {
      if (e == 0) {
        return "";
      } else {
        let date = new Date(e * 1000);
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        let D = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        return `${Y}-${M}-${D} ${h}:${m}:${s}`;
      }
    },
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{7})\w+(\w{4})/, "$1...$2");       
        return a;
      } else {
        return "...";
      }
    },
      time(time){
      if(time){
        var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})\s(\d{1,2})(:(\d{1,2})){2}$/;
        var end = time.match(reg).slice(1,4).join('-');
        return end
      }
    }
  },
   watch: {
    "$store.getters.userWallet": function (val) {
       this.pustadd(val)
    },
     "$store.getters.nlist": function (val) {
      //  console.log(val.length);
       this.mapdata()
    },
    deep: true,
    immediate: true,
  },
  // beforeCreate(){
  //   this.ethConnect()
  // },
  beforeCreate() {
    
    var i = 0;
    var a = setInterval(() => {
       this.shows=!this.userWallet
      if (typeof window.ethereum !== "undefined"&&!this.userWallet) {
        connectTron().then(
          (info) => {
            clearInterval(a);
            if (info[0]&&info[0].indexOf("0x") == 0) {
              if(this.$store.getters.myFil!=info[0]){  
                this.userWallet =  info[0]   
                 this.$store.commit("userWallet", info[0]);   
                 this.shows=false
               
               if(this.isOpen){
                this.cread(info[0])
               }else{
                this.impower=true
               }
                // this.cread(info[0])
              }else{
                this.$store.commit("userWallet", info[0]); 
                // this.pustadd(info[0])   
                this.cread(info[0])
                this.shows=false         
              }
              //    
              //      
              
            } else {
              // this.$notify("请使用HECO地址登录游戏");
              this.shows=true
            }
          }
        );
      }
      if (i > 5) {
         if(this.$store.getters.userWallet){return}
        // this.$notify("钱包失联了！！");
        this.shows=true
        clearInterval(a);
      }
      // console.log(i);
      i++;
    }, 1000);
  }, 
  created() { 
      this.yqmcode = this.getQueryString("code");
      this.userWallet = this.$store.getters.userWallet;  
      this.getPrice()  
     
     
  },

  computed: {
    dqyy() {
      if (this.$store.getters.language) {
        return this.$store.getters.language;
      } else {
        return "en-US";
      }
    },  
  },
  methods:{
    getData(){
       if(!this.isOpen){return}
      getContTotalPower().then(res=>{
        this.totalPower=res
      })
      getContBalanceLP().then(res=>{
        this.lpinfo=res
      })
      getContBalanceFPC().then(res=>{
        // console.log(res);
        this.info=res
        getContBalanceUSDT().then(ress=>{
        this.infos={
            r1:ress.r1,
            r2:ress.r2,
            r3:BigInt(res.r4)+BigInt(ress.r1),
            r4:BigInt(res.r5)+BigInt(ress.r2),
            r5:ress.r3,
            r6:BigInt(res.r8)+BigInt(ress.r3),
        }
      })
      })

    },
    jsPrice(val){
      if(val){
      return  Math.round(val*this.price*1000000)/1000000
      }else{
        return 0
      }
    },
    dexc(val){
    if(val){
      let  ethereum = window.ethereum
    let web3s = new Web3(ethereum);
      let amount=  web3s.utils.fromWei(val +'', 'ether'); 
      // let num =val/Math.pow(10,18)
      return val?  Math.round(amount*1000000)/1000000:'0'
    }else{
      return 0
    }
    },
  getPrice(){
          if(!this.isOpen){return}
    getUByAmounts(1).then(res=>{
      this.price=res?  Math.round(res*1000000)/1000000:'0'
      this.getData()
    })
  },
  approve() {
      if (this.userWallet) {
        if(this.isSign){
            this.impower = false;
              this.$store.commit("myFil", this.userWallet);
            this.cread(this.userWallet);
            this.$store.commit("userWallet", this.userWallet);
          
        }else{
        this.sqloading = true;
        Sign(this.userWallet).then((rs) => {
          this.sqloading = false;
          if (rs) {
            this.impower = false;
            this.$store.commit("myFil", this.userWallet);
            this.cread(this.userWallet);
            this.$store.commit("userWallet", this.userWallet);
          }
        });
        }
      }
    },
    lqselects(e){
      this.$notify(this.$i18n.t("m.zwkf"))
      return     
    },
    toOpen(url) {
       window.open(url)
    },  
    cread(val) {
      this.userWallet = this.$store.getters.userWallet||val; 
      if(this.userWallet){  
        let baseUrl=((window.location.href).split("/#/"))[0]
    if(baseUrl.indexOf('?')){
        baseUrl= ((baseUrl).split("/?"))[0]
        this.codeWallet= baseUrl+"?code=" +  this.userWallet  
    }else{
       this.codeWallet= baseUrl+"?code=" +  this.userWallet
    }  
        getCanBind(this.userWallet).then(res=>{   
          // console.log('bingd',res);
          if(res){
            this.bdshows = true;
          }
        })
      }else{
        this.shows=true
      }
    },
 
   
  
    tobding() {
      if (this.yqmcode) {
        if (this.bdloading) {
          this.$toast(this.$i18n.t("m.bdload"));
          return;
        } else {
            this.bdloading = true;
          this.bangding(this.yqmcode);  
        }
      } else {
        this.$toast(this.$i18n.t("m.bdinfo"));
      }
    },
 
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    
    ethConnect() {
      connectTron().then((info) => {
        if (info[0]&&info[0].indexOf("0x") == 0) {          
           this.shows=false      
           this.cread(info[0])
           this.$store.commit("userWallet", info[0]);            
         
        } else {
          // this.$toast(this.$i18n.t("m.qsydzdl"));
        }
      });
    },
    pustadd(info){      
      if(info){
      this.impower=true
      }else{
        this.shows=true
      }
    },
    async bangding(code) {       
        if (code) {
          if(code==this.userWallet){return}
          toBind(this.userWallet,code).then(res=>{
            this.bdloading = false;
            if(res){
              this.$toast(this.$i18n.t("m.bangsuc"));
              this.bdshows = false;
            }
            // console.log(res);
             
          })      
        } else {
          this.bdloading = false;
        }      
    },  
    goto(val,e) {   
       clearInterval(this.time);   
       if(e){
        
       this.$router.push({ path: val,query:{ac:e} }); 
       }else{
      this.$router.push({ path: val });
       }
    },
    async toPage(val) {    
     if(this.$store.getters.userWallet){
       this.$router.push({ path: val });
      }else{
        this.shows=true
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";

$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";

.home {
  background:  #130700  no-repeat;
  // background: #161628;
  background-size:contain;
  background-position: center bottom;
  overflow-x: hidden;
  width: 750px;
  margin: 0 auto;
  .mtop {
    margin: 140px 10px 0;
    padding: 10px 30px ;
    color: #fff;
   
    border: 1px solid #381b7c;
    .zctime{
      color: #fff;
      text-align: left;
      margin: 20px 0px;
      display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .price {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .txt {
        font-size: 26px;
        color: #ffffff;
        text-align: left;
        margin: 20px 0;
      }
      .num {
        font-size: 36px;
        color: #ffffff;
        margin-right: 10px;

        .dw{
          font-size: 32px;
          color: #ffffff;
          margin-right: 5px;
        }
      }
      .right{ 
        display: flex;
      align-items: flex-end;
      flex-direction: column;
      justify-content: space-between;
        .txt{
          font-size: 26px;
        color: #8d9399;
        text-align: left;
        margin: 20px 0;
        }
        .nums{ font-size: 46px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(234deg,#e4005e, #b4184c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      }
    }
    .address {
      margin: 28px;
      display: flex;
      align-items: center;
      font-size: 30px;
      font-family: $t-mf;
      font-weight: bold;
      color: #ffffff;
      line-height: 28px;
      .fuzhi {
        background: transparent;
        border: none;
      }
      .icon {
        width: 26px;
        height: 26px;
        margin-right: 16px;
      }
    }
    .close {
      position: absolute;
      right: 22px;
      top: 28px;
      img {
        height: 32px;
        width: 32px;
      }
    }
  }

  .sylist{
    display: flex;
    align-items: center;
    padding: 30px;
    justify-content: space-between;
    .boxl{
      background: linear-gradient(-18deg, #ffdf2d, #00e2be);;
      // border-radius: 18px;
      height: 140px;
      width: 45%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;  
    }
    .boxr{
      background:rgba(38, 38, 38, 0.48);//#262626 ;
      // border-radius: 18px;
      height: 140px;
      width: 45%; display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center; 
      position: relative;   
    }
    .stl{
      margin: 10px 30px;
      color: #ffffff;
      font-size: 22px;
    }
    .snum{
        margin: 10px 30px;
      color: #ffffff;
      font-size: 26px;
    }
    .flximg{
      position: absolute;
      right: 20px;
      width: 130px;
    }
  }
  
  .mdex{
    font-size: 24px;
    color: #fff;
    background: rgba(0 0 0 / 24%);
    margin: 0 0 20px;
    padding: 20px;
    border-top:1px solid  #6d6d6d
  }
  .my-swipe {
    width: 694px;
    min-height: 360px;
    margin: 10px auto 0;
    .imgs {
      width: 100%;
      height: 100%;
      // border-radius: 20px;
    }
  }
  
  .band {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 199px;
    width: 199px;
    margin: 10px auto;
    animation: rotate 10s linear 0.1s infinite;
    img {
      height: 38px;
      width: 246px;
      margin: 64px auto;
    }
  }

  @keyframes rotate {
    0% {
      opacity: 1;
      transform: rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }
  .dark.band {
    // background-image: url("../assets/img/badns.png");
  }
  .content {
  //  background: url("../assets/img/bm/b6.png") ;
    background-size: 100% auto;
    background-position: bottom ;
    margin-top: 100px;
    
    .actives {
      // padding: 56px 0;
    background: #00000070;
    // border-radius: 20px;
    // background-size: cover;
        // border-radius: 30px;
    width: calc( 100%);
    margin: 0 auto;
    .my-swipe1 {
    width: calc( 100% - 35px);
    height: 100%;
    margin: 0 auto;
    // padding: 10px; 
     .imgss {
      width: calc(680px);
      height: auto;
        //  border:2px solid #3bf7ff;
    border-radius: 16px ;
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 12%), 0 4px 4px rgb(0 0 0 / 12%), 0 8px 8px rgb(0 0 0 / 12%), 0 16px 16px rgb(0 0 0 / 12%);
    }
    }
    .notific{
      background: transparent;
      display: flex;
      align-items: center;
      width: 700px;
      padding: 14px 0;
    z-index: 10;
    margin:  16px  auto 16px;
    position: relative;
    box-sizing: border-box;
    border-radius: 18px;
      .ico{
        width: 46px;
        height: 46px;
      }
      .txt{
        font-size: 26px;
        color: #ffffff;
        margin-left: 16px;
        margin-bottom: 5px;
      }
      .right{
        flex: 1;
        width: 100%;
        font-size: 28px !important;
      }
    }
    .simg{
      width: 256px;
      height: 256px;
      margin: 20px auto 0;
      // border-radius: 10px;
    }
      .title {
        font-size: 30px;
        font-family: $t-mf;
        font-weight: 600;
        @include font_color("font_color2");
        line-height: 54px;
        padding:30px 32px 12px;
      }
      .info {
        width: 600px;
        min-height: 52px;
        font-size: 24px;
        font-weight: 400;
        @include font_color("font_color2");
        line-height: 52px;
        margin: 12px auto 33px;
        text-align: left;
      }
     
      .btngrop{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .btn {
        width: calc(100% - 40px);
        height: 80px;
        background: #b4184c;
        box-shadow: 0px 4px 16px 4px rgba(62,1,162,1);
        // border-radius: 40px;
        font-size: 32px;
        font-family: $t-mf;
        margin:34px 20px;
        font-weight: 600;
        @include font_color("font_color3");
        line-height: 80px;
        text-align: center;        
border: 2px solid rgba(115, 40, 236, 0.5);
font-weight: bold;
      }
      .act{
        background: #290E54;
box-shadow: 0px 4px 16px 4px rgba(62,1,162,1);
// border-radius: 40px;
border: 2px solid rgba(115, 40, 236, 0.5);
      }
    }

    .price{
      background: #130700;
      border-radius: 18px;
      min-height: 360px;
      width: 680px;
      margin: 16px auto;
      border: 2px solid #582204;
      overflow: hidden;
      padding: 0 30px 16px ;
      box-sizing: border-box;
      .box{
        height: 102px;
        width: 100%;
        border-radius:16px 16px 280px 16px ;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 40px auto;
        .txt{
          font-size: 28px;
          color: #A6A6A6;
        }
        .num{
          font-size: 48px;
          color: #FF7C36;
          font-weight: bold;
          margin-top: 10px;
        }
      }
      .mbox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        border-top: 1px solid #582204;
      }
      .flexs{
        align-items: flex-start;
      }
   
      .item{
        border-radius: 26px;  
        width: calc(100% - 16px);
        min-height: 120px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding: 40px 0;
        box-sizing: border-box;
        .txt{
          font-size: 24px;
          color: #A6A6A6;
          text-align: left;
        }
        .num{
          font-size: 24px;
        
          color: #ffffff;
        padding-left: 8px;
        text-align: right;
        }
        .snum{
          font-size: 24px;
        color: #A6A6A6;
        padding-top: 8px;
        text-align: right;
        }
      }
      .items{
        border-radius: 26px;
        min-height: 160px;
        width: 50% ;
        display: table-cell;
        align-items: center;
        flex-direction: column;
        padding: 40px 10px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px solid #582204;
        .txt{
          font-size: 24px;
          color: #A6A6A6;
        }
        .num{
          font-size: 24px;
        color: #ffffff;
        padding-left: 8px;
        margin-top: 16px;
        }
      }
      .nitem{
        margin: 40px 0;
        text-align: right;
        .txt{
          font-size: 24px;
          color: #A6A6A6;
        }
        .num{
          font-size: 32px;
          color: #ffffff;
          margin-top: 16px;
        }
      }
      .tl{
        text-align: left;
      }
      .actc{
        border: 1px solid #582204;
      }
      .nobr{
        border: none;
           display: table;
        justify-content: space-between;
        align-items: flex-start;
         border-spacing: 16px;
        border-collapse: separate;
        width: 100%;
      }
    }
































    .card0{
      width: 670px;
      margin: 80px auto ;
      .title{
        color: #ffffff;
        font-size: 48px;
        margin-bottom: 40px;
      }
      .box{
        .txts{
        color: #a6a6a6;
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 0.00938em;
        text-transform: none;
        padding-left: 15px;
        padding-right: 15px;
        font-style: normal;
        margin-bottom: 15px;
        }
      }
    }


    .card {
      background: #130700;
          align-items: center;
          border: 1px solid #582204;
      border-radius: 40px;
      // min-height: 300px;
      padding: 30px 10px;
      margin: 20px 30px 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .line{
        background:#582204 ;
        width: 100%;
        height: 1px;
        margin: 40px 30px;
      }
      .titles{
        font-size: 48px;
          font-weight: 600;
          color: #ffffff;
          width: 100%;
          // border-bottom: 1px solid rgb(53, 53, 53);
          .img2{
            width: 100px;
          }
      }
      .txts{
              color: #a6a6a6;
              font-size: 24px;
              margin-bottom: 20px;
              font-style: normal;
              margin: 0px 0px 8px;
              letter-spacing: 0.00938em;
              text-transform: none;
              padding-left: 15px;
              padding-right: 15px;
              text-align: left;
              padding-bottom: 1px;
            }
            .cent{
              text-align: center;
              // text-indent: 40px;
            }
      .hui{
        color: #a6a6a6;
      }   
       .ico{
        // height: 180px;
        width: 258px;
        margin: 52px auto;
       } 
      .title{
        font-size: 32px;
        font-weight: 600;
        color: #ffffff;
        line-height: 50px;
        text-align: center;
        
           margin: 16px auto;
      }
      
    }

   
    .linebox{
      display: flex;
      align-items: center;
      justify-content: space-around;
      .card3{
        flex: 1;
        margin: 10px 28px;
        background:#00000070;//#262626;
        // border-radius: 20px;
            border: 1px solid #381b7c;
        // height: 360px;
            display: flex;
    align-items: center;
    justify-content: center;
         .list {
          flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        margin: 10px 0 10px;
        padding:20px 0;
        position: relative;
        .she{
          position: absolute;
          right: 10px;
          top: 10px;
          height: 45px;
          width: 45px;
        }
        .item {
          flex: 1;
          overflow: hidden;
          .ico{width: 68px;}
            .num {
        margin-top: 22px;
        font-size: 32px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(270deg, #F89C8A, #FB5753);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 58px;
        white-space: nowrap;
        overflow-x: auto;
        padding: 0 20px;
        overflow-y: hidden;
      }
      .tt {
        font-size: 28px;
        font-family: $t-mf;
        font-weight: 600;
        color:#ffffff;
        line-height: 40px;
        margin-top: 12px;
      }
          .btn {
           min-width: 280px;         
            background: #000;
            // border-radius: 60px;
            font-size: 32px;
            font-family: $t-mf;
            padding: 10px 20px;
            font-weight: 600;
            color: #ffffff;
            margin: 10px auto;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
             border: 1px solid #381b7c;
             background: linear-gradient(270deg, #F89C8A, #FB5753);
            .img{
              height: 32px;
              width: 32px;
              // border-radius: 100%;
              margin-right: 10px;
            }
            .line{
              height: 20px;
              width: 1px;
              background: #b4184c;
              margin:0 20px;
            }
          }
        }
      }
      // .row{
      //   flex-direction: row;
      // }
      }
    }
    .card2 {
      width: 694px;
      height: 100%;
      background:#00000070;// #262626;
      // box-shadow: 0px 4px 16px 8px rgba(227, 224, 224, 0.5);
      // @include box_color("box_color");
          border: 1px solid #381b7c;
      // border-radius: 20px;
      margin: 28px auto;
      padding: 28px 0;
       color:#000;
       
      .ico{
        width: 43px;
        height: 43px;
      }
      .imgroup{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: 48px;
        .img{width: 86px;
        height: auto;
          // border-radius: 10px;
        }
      }
      .mytg{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin:0 28px;
      .left{
        display: flex;
        align-items: center;
        .tt{
          margin: 0 10px;
        }
      }
      .right{
       
      }
      }



      .title {
        margin-left: 50px;
        margin-right: 28px;
        height: 66px;
        font-size: 40px;
        font-family: $t-mf;
        font-weight: 600;
        color: #ffffff;
        line-height: 66px;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: center;       
        .node {
          font-size: 30px;
          font-weight: 600;
          color: #8B8B94;
          line-height: 32px;
        }
      }
      .lmtop{
        display: flex;
        justify-content: space-between;
        padding: 20px 32px;
         color:#000000;
        .left{
          display: flex;
          flex-direction: column;
          align-items: center;
          .ilog{
            height: 56px;
            width: 56px;
          }
          .ttx{
            font-size: 24px;
            font-family: $t-f;
           
          }
        }
        .cont{
          height: 76px;
          width: 76px;
        }
        .right{
           display: flex;
          flex-direction: column;
          align-items: center;
          .ilog{
            height: 56px;
            width: 56px;
          }
          .ttx{
            font-size: 24px;
            font-family: $t-f;
          }
        }
      }
      .sinput{
        border-top: 1px dashed #e9e9e9;
        border-bottom:1px dashed #e9e9e9;
        display: flex;
        height: 100px;
        justify-content: space-between;
        align-items: center;
         padding: 10px 32px;
        .left{
          width: 50%;         
         input{
          border: none;
          text-align: left;
          font-family: $t-f;
          background: transparent;
        }
        }
        .right{
          width: 50%;
         input{
          border: none;
          text-align: right;
          font-family: $t-f;
          background: transparent;
        }
        }
      
      }
      .info{
        padding: 10px 32px;
        .tlt{
          font-size: 22px;
          margin: 20px 0;
        }
        .total{
          display: flex;
          align-items: center;
          justify-content: space-between;

        }
      }
      .tips {
        display: flex;
        align-items: center;
        flex-direction: column;

        .cnum {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #999999;
          line-height: 40px;
        }
      }

      .cbox{
            margin: 30px;
    padding: 14px 20px;
    position: relative;
    background: #fff;
    box-shadow: inset 0 -2px 8px 0 rgb(51 1 138 / 8%);
    // border-radius: 15px;
    border: 1px solid;
        .tl{
          font-weight: 600;
          font-family: $t-mf;
          font-size: 26px;
          text-align: left;
          color: #333;
        }
        .line{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 600;
          font-size: 30px;
          font-family: $t-f;
          margin: 40px 10px;
          color:#00023d;
        }

      }

      .num {
        margin-top: 22px;
        font-size: 18px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(234deg,#e4005e, #b4184c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // line-height: 58px;
        white-space: nowrap;
        overflow-x: auto;
        padding: 0 20px;
        overflow-y: hidden;
      }
      .tt {
        font-size: 22px;
        font-family: $t-mf;
        font-weight: 600;
        color:#ffffff;
        line-height: 40px;
        margin-top: 12px;
      }
      .gree{
        color: #14f714;
      }
      .red{
        color: #ec2832;
      }
      .sitm{
    background: #313131;
    // border-radius: 10px;
    padding: 10px 0 20px;
    margin: 5px;

    .num{
      overflow: hidden;
      white-space: pre-wrap;
      padding: 0 0 0 10px;
    }
      }
      .bottom{
        margin-top: 64px;
         .btn {
            width: 80%;
            height: 80px;
            // background: #b4184c;
            
          background: #a2a2a9;
// box-shadow: 0px 4px 16px 4px rgba(207,182,247,1);
// border-radius: 40px;
            font-size: 32px;
            font-family: $t-mf;
            font-weight: 600;
            color: #ffffff;
            line-height: 80px;
            margin: 20px auto;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
         }
         .stbn{
            font-size: 30px;
            font-family: $t-f;
            font-weight: 600;
            color: #8B8B94;
            margin: 10px auto;
            line-height: 34px;
         }
      }
      .list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 24px 0;
        .item {
          // flex: 1;
          overflow: hidden;

          .btn {
            min-width: 100px;  
            max-width: 160px;          
            background: #000;
            // border-radius: 60px;
            font-size: 32px;
            font-family: $t-mf;
            padding: 10px ;
            font-weight: 600;
            color: #ffffff;
            margin: 0 auto;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .img{
              height: 32px;
              width: 32px;
              // border-radius: 100%;
              margin-right: 10px;
            }
          }
        }
      }

      .jjc {
        line-height: 52px;
        display: flex;
        justify-content: center;
        span:nth-child(1) {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #888888;
        }
        span:nth-child(2) {
          font-size: 44px;
          font-family: $t-f;
          font-weight: bold;
          @include font_color("font_color1");
          margin: 0 52px 0 20px;
          max-width: 50%;
          overflow-x: auto;
          display: inline-block;
          overflow-y: hidden;
        }
        span:nth-child(3) {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #616161;
        }
      }
      .time {
        margin: 52px auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          height: 42px;
          width: 38px;
          margin-right: 12px;
        }
        div {
          font-size: 44px;
          font-family: $t-mf;
          font-weight: bold;
          @include font_color("font_color1");
          line-height: 52px;
        }
      }

      .txt {
        font-size: 28px;
        font-family: $t-mf;
        font-weight: 600;
        color: #616161;
        line-height: 40px;
      }

      .bltitle {
        height: 60px;
        @include background_color("background_color5");
        font-size: 32px;
        font-family: $t-mf;
        font-weight: 600;
        @include font_color("font_color1");
        line-height: 60px;
        margin-top: 69px;
      }
      .list {
        .listtop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #616161;
          line-height: 40px;
          padding: 0 52px;
          margin: 25px auto;
          .sort {
            width: 56px;
          }
        }
        .items {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 52px;
          margin: 25px auto;
          .sord {
            font-size: 28px;
            font-family: $t-f;
            font-weight: bold;
            @include font_color("font_color1");
            line-height: 32px;
            width: 56px;
            text-align: center;
          }
          .address {
            span {
              height: 32px;
              font-size: 28px;
              font-family: $t-f;
              font-weight: bold;
              @include font_color("font_color1");
              line-height: 32px;
              margin: 0 13px;
            }
            .fuzhi {
              background: transparent;
              border: none;
              width: 30px;
            }
            img {
              height: 30px;
              width: 28px;
            }
          }
          .num {
            font-size: 28px;
            font-family: $t-f;
            font-weight: bold;
            @include font_color("font_color1");
            line-height: 32px;
          }
        }
      }
      .buttombtn {
        margin: 15px auto 60px;
        width: 152px;
        height: 54px;
        background: #f3f3f3;
        // border-radius: 27px;
        transform: all 0.3;
        span {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #aaaaaa;
          line-height: 54px;
          margin: 0 10px;
        }
        img {
          width: 22px;
          height: 14px;
        }
        .sxz {
          transform: rotate(180deg);
        }
      }
    }
    .sbfg{
    //   border: 1px solid #381b7c;
    // background: url("../assets/img/abg.png") 100%/100% no-repeat;
    
background: linear-gradient(270deg, #F89C8A, #FB5753);
        display: flex;
    align-items: center;
    justify-content: space-between;
    height: 150px;
    .btn{
      display: flex;
      align-items: center;
      justify-content: flex-end;
        margin:  0 20px;
        min-width: 252px;
        height: 84px;
        line-height: 84px;
        //  background: linear-gradient(18deg, #ffdf2d, #00e2be);
        border: 1px solid #ffffff; 
        // border-radius: 70px;
        padding-left: 20px;
        font-weight: 600;
        font-family: $t-mf;
        overflow: hidden;
        
        .she{
          height: 45px;
          width: 45px;
          margin: 0 30px;
        }
        .tnxt{
          color: #ffffff;
        font-family: $t-mf;
        white-space: nowrap;
             font-size: 36px;
        }
    }
  }
   .card4 {
    width: 652px;
    // background: linear-gradient(18deg, #ffdf2d, #00e2be);
    // border-radius: 20px;
    background: #00000070;
    padding: 20px;
    margin: 20px auto;
border: 1px solid #381b7c;
    .yqlink {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 18px;
      .ltxt {
        font-size: 30px;
        font-family: $t-mf;
        font-weight: 600;
        color: #ffffff;
        line-height: 42px;
      }
      .mylink {
        width: 440px;
        height: 60px;
        background: #f8f8f8;
        // border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        .address {
          width: 250px;
          height: 32px;
          font-size: 22px;
          font-family: $t-mf;
          font-weight: 600;
          color: #000000;
          line-height: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fuzhi {
          background: transparent;
          border: none;
          width: 50px;
        }
        .icon {
          width: 42px;
          height: 42px;
        }
      }
    }
    .tips {
      font-size: 24px;
      font-family: $t-mf;
      font-weight: 400;
      color: #ffffff;
      line-height: 34px;
      text-align: left;
      margin: 22px 0 0;
    }
    .btns {
      width: 638px;
      height: 80px;
      background: #000000;
      // border-radius: 40px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 18px auto 20px;
    }
  }
    .more {
      width: 750px;
      margin: 0 auto;
      .txts {
        height: 56px;
        font-size: 40px;
        font-family: $t-mf;
        font-weight: 600;
       color: #fff;
        line-height: 56px;
        margin: 54px auto;
      }
     .qblist {
        display: flex;
        flex-wrap: wrap;
        margin: 15px;
        .icons {
          width: calc(50% - 32px);
          background: #262626;
          // box-shadow: 0px 4px 16px 8px rgba(227,224,224,0.5);
          // border-radius: 7px;
          // border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          margin: 16px;
          img {
            width: 84px;
            height: 84px;            
            padding: 16px;
          }
          span {
            height: 44px;
            font-size: 22px;
            font-family: $t-mf;
            font-weight: 600;
            color: #ffffff;
            line-height: 44px;
            cursor: pointer;
            flex: 1;
            text-align: left;
            margin-left: 10px;
          }
        }
      }
    }
    .buttoms {
      font-size: 20px;
      color: #a6a6a6;
      line-height: 28px;
      margin: 100px auto 180px;
      
    }
  }
 

  .popup {
    width: 672px;
    background: #130700;
    border:1px solid #582204;
    // border-radius: 30px;
        padding: 30px 30px 40px;
        box-sizing: border-box;
    ::v-deep.van-list{
      height: 50vh;
    overflow: auto;
    }
    ::v-deep .van-stepper__input{
          font-size: 42px;
        }
   
    .tips{
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 600;
      color: #999999;
      line-height: 66px;
      margin: 24px auto;
    }
    .inode {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      background: #f1f1f1;
      // border-radius: 8px;
      margin: 8px 34px;
      padding: 20px 8px;
      font-weight: 400;
      font-size: 28px;
      font-family: $t-f;
      .items{
         display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      .line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px ;
        flex: 1;
        .left {
        text-align: left;
          font-size: 22px;
          font-family: $t-mf;
          font-weight: 400;
          color: #999;
          line-height: 32px;
      }
      .right {
        font-size: 22px;
        font-family: $t-f;
        font-weight: 600;
        color: #131415;
        line-height: 32px;
      }
      }}
      .fuzhi {
        background: transparent;
        border: none;
        color: #1755ee;
      }
    }
    .input {
      border: none;
      width: 85%;
      height: 80px;
      background: transparent;
      border: 1px solid #582204;
      color: #ffffff;
      // border-radius: 50px;
      border-radius: 40px;
      margin: 40px auto 0;
      padding: 10px 20px;
      font-size: 28px;
      // background: transparent;
      
    }
    .bg{
       background: linear-gradient(234deg,#e4005e, #b4184c);
        margin: 20px 34px;
       padding:10px;
       
    // border-radius: 20px;
       
    }
    .logo{
      // height:188px;
      width: 188px;
      margin: 44px auto 20px;
    }
    .item {
     display: flex;
     align-items: center;
     justify-content: space-between;
       background:#262626;
      //  border-radius: 10px;
    padding: 0 10px;
      .txts {
        font-size: 32px;
        font-family: $t-f;
        text-align: right;
        margin: 10px 0;
    font-weight: bold;
    line-height: 54px;
     background: linear-gradient(234deg,#e4005e, #b4184c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .flexs{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 0;
      
        .tts{
           font-size: 28px;
          font-family: $t-mf;
         color: #ffffff;
          line-height: 40px;
          text-align: center;
          margin: 0 10px ;
          
        }
      }
      .txd{
        margin: 20px 0;
        text-align: left;
        font-size: 24px;
        font-family: $t-f;
        font-weight: 600;
        color: #f8f8f8;
        line-height: 40px;
      }
      .inputs {
        border: none;
        height: 50px;
        width: 100%;
        font-size: 34px;
        font-family: $t-f;
      }
    }
    .txt {
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;     
      text-align: left;
    }
    .m66{
       margin: 66px auto;
    }
      .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
            .close{
                width:28px;
            }
             .title{
            width: 100%;
            font-size:32px;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            border-bottom:1px solid #582204;
            padding-bottom: 30px;
        }
        }
         .sqtxts{
      font-size: 24px;
      font-family:$t-f;
      font-weight: 600;
      color: #848484;
      line-height: 44px;
      margin: 10px 0 45px;
      padding: 0 22px;
      box-sizing: border-box;
      text-align: left;
    }
    .sqtxt{
      font-size: 32px;
      font-family:$t-f;
      font-weight: 600;
      color: #848484;
      line-height: 44px;
      margin: 10px 0 45px;
      padding: 0 22px;
      box-sizing: border-box;
    }
    .xbox{
       background: #F3F0F4;
            padding: 10px 20px;
            border-radius: 36px;
             display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 16px auto;
              .num{
          //  margin: 22px auto;
        font-size: 24px;
        font-family: $t-f;
        font-weight: bold;
          background: linear-gradient(34deg, #1fa391, #28514b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
            .txt{
              color: #ffffff;
                font-size: 24px;
                font-weight: bold;
                margin:  0 10px;
            }
    }
    .rbox{
            display: flex;
            align-items: center;
            justify-content: center;
           
            .num{
          //  margin: 22px auto;
        font-size: 42px;
        font-family: $t-f;
        font-weight: bold;
          background: linear-gradient(234deg, #106156, #cc1d1d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
            .txt{
              color: #2A2A2A;
                font-size: 24px;
                font-weight: bold;
                margin:  0 10px;
            }
            .ico{
              width: 40px;
              height: 40px;
            }
          }
    .flsz{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cnet{
      text-align: center;
      font-size: 46px;
    }
    .btn {
     width: calc(100% - 200px);
      height: 112px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 40px auto 0;
          background: #FF7C36;
          border: 1px solid #FF7C36;
border-radius: 40px;
border: none;
  display: flex;
      align-items: center;
      justify-content: center;
    }
     .btns {
      width: 480px;
      height: 112px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 40px auto 0;
// background: linear-gradient(90deg, #F83AFD 0%, #C333FF 31%, #A84BFF 49%, #724EFF 79%, #495AFA 100%);
// box-shadow: 0px 4px 16px 4px rgba(207,182,247,1);
          background: #FF7C36;
          border: 1px solid #FF7C36;
border-radius: 32px;
border: none;
  display: flex;
      align-items: center;
      justify-content: center;
    }
    .nbtn{
      width: 100%;
      height: 80px;
box-shadow: 0px 4px 16px 4px rgba(227,211,253,1);
// border-radius: 40px;
border: 2px solid rgba(115, 40, 236, 0.5);
font-size: 32px;
font-family: $t-f;
margin: 54px 20px;
font-weight: 600;
color: #b4184c;
line-height: 44px;
  display: flex;
      align-items: center;
      justify-content: center;
    }
    .lang {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      img {
        height: 50px;
        width: 50px;
      }
      span {
        font-size: 28px;
        font-family: $t-mf;
        font-weight: 400;
        @include font_color("font_color1");
        line-height: 40px;
      }
    }
 
  }
 
  .flexbottom{
    position: fixed;
    bottom: 0;
    width: 750px;
    height: 160px;
    background: linear-gradient(18deg, #ffdf2d, #00e2be);
    z-index: 99;
    // border-radius: 50% 50% 0 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .txt{
    font-size: 28px;
    font-weight: 600;
    font-family: $t-f;
    line-height: 42px;
    }
  }
   .infos{
        font-size: 28px;
        font-weight: 600;
        font-family: $t-mf;
        text-align: justify;
        background: #000000;
        display: flex;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
      .video{
        width: 100%;
        height: 100vh;
      }
      }
}
.buttoms{
//  margin-bottom: 180px;
  .imgline{
    .img{
      width: 56px;
      height: 56px;
      margin: 20px;
    }

  }
}
</style>
